<template>
	<view class="">
		<view class="container">
			<view class="content">
				<!-- 地图 -->
				<map class="map" :markers="markers" :latitude="latitude" :longitude="longitude"></map>
				<!-- 位置描述 -->
				<view class="describe">
					<view class="flex-align">
						<view class="dot"></view>
						<text class="address-text">{{address}}</text>
					</view>
					<!-- 按钮 -->
					<view class="arrive-btn" @click="reachDestination">我已到达目的地</view>
					<view class="tips">如您已到达目的地，请先点击此按钮。</view>
				</view>
			</view>
			<!-- 签到上传 -->
			<view class="sign-in-title">请上传签到照片</view>
			<image :src="img.path || imgUrl.url" @click="chooseImage" class="sign-in-pictures"
				v-if="img.path || imgUrl.url"></image>
			<image v-else src="../../../static/image/page/qd-img.png" @click="chooseImage" class="sign-in-pictures">
			</image>
			<!-- 按钮 -->
			<view class="btn" @click="next">下一步</view>
		</view>
	</view>
</template>

<script>
	import {
		uploadFileTest
	} from '../../../common/util.js';
	export default {
		data() {
			return {
				latitude: 0,
				longitude: 0,
				address: '',
				markers: [], //坐标点
				id: '',
				img: {}, //上传的图片
				imgUrl: {}, //已上传 后端拿到的图片
				isSignIn: false, //是否签到
			}
		},
		onLoad: function(options) {
			this.id = options.id;
			this.getCurrentPosition();
			this.getArriveImg();
		},
		methods: {
			//获取签到图片
			getArriveImg() {
				this.$api.getArriveImg({
					id: this.id
				}).then(res => {
					this.imgUrl = res.data.data ? res.data.data : ""
				})
			},


			//选择图片
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera', 'album'],
					success: (res) => {
						// tempFilePath可以作为img标签的src属性显示图片
						this.img = res.tempFiles[0];
					}
				})
			},
			//到达目的地
			// la: +this.latitude || 29.60661,
			// lo: +this.longitude || 106.57439
			reachDestination() {
				this.$api.isArrive({
					id: this.id,
					la: +this.latitude || 29.60661,
					lo: +this.longitude || 106.57439
				}).then(res => {
					uni.showToast({
						title: '签到成功',
					})
					this.isSignIn = true;
				})
			},
			//下一步
			next() {
				if (this.isSignIn && (this.img.path || this.imgUrl.url)) {
					if (this.img.path) {
						//获取oss凭证
						this.$api.surveyGetMap().then(async res => {
							console.log('获取凭证')
							let img = this.img;
							let credentials = res.data.data;
							let arr = img.path.split('.'); //解析后缀
							let suffix = arr[arr.length - 1];
							let url = await uploadFileTest(img.path, credentials, suffix); // //上传图片
							let value = {
								id: this.imgUrl ? this.imgUrl.id : 0,
								sid: this.id,
								showName: url,
								url,
								type: 7,
								size: img.size
							};
							this.$api.addArriveImg2(value).then(res => {
								console.log('上传', res)
							
									this.imgUrl= res.data.data
								
								//去详情
								uni.navigateTo({
									url: `/pages/survey/child/enter-menu?id=${this.id}`
								})
							})

						})
					} else {
						//去详情
						uni.navigateTo({
							url: `/pages/survey/child/enter-menu?id=${this.id}`
						})
					}



				} else {
					uni.showToast({
						icon: 'none',
						title: '请确保签到并上传图片',
					})
				}
			},
			//获取当前用户位置
			getCurrentPosition() {
				console.log(1111)
				var _this = this;
				uni.getLocation({
					type: 'gcj02 ',
					geocode: true,
					success(res) {
						console.log('获取定位成功', res)
						// uni.showModal({0
						// 	title: '提示',
						// 	content: JSON.stringify(res)
						// })
						_this.address = res.address.province + res.address.city + res.address.district +
							res
							.address.street + res.address.streetNum;
						_this.markers = [{
							id: 1,
							latitude: res.latitude,
							longitude: res.longitude,
							iconPath: '../../../images/index/mark-icon.png',
							width: 16,
							height: 24,
						}];
						_this.latitude = res.latitude;
						_this.longitude = res.longitude;

					},
					fail(e) {
						// alert(e)
						uni.showModal({
							title: '提示失败',
							content: JSON.stringify(e)
						})
						console.log('获取定位失败', e)
					}
				})
			},
		}
	}
</script>

<style scoped>
	.container {
		padding: 30rpx;
	}

	.content {
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0px 6rpx 20rpx 0px rgba(0, 0, 0, 0.04);
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 40rpx;
	}

	.map {
		width: 100%;
		height: 360rpx;
		margin-bottom: 28rpx;
	}

	.describe {
		padding: 0 30rpx 30rpx;
	}

	.dot {
		width: 12rpx;
		height: 12rpx;
		background: #FC4073;
		border-radius: 50%;
		margin-right: 18rpx;
	}

	.address-text {
		font-size: 26rpx;
		font-weight: bold;
		color: #FC4073;
	}

	.arrive-btn {
		margin-top: 30rpx;
		height: 80rpx;
		background: #EEEEFE;
		border-radius: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #585CF7;
		line-height: 80rpx;
		text-align: center;
		margin-bottom: 24rpx;
	}

	.tips {
		text-align: center;
		font-size: 22rpx;
		font-weight: bold;
		color: #A7AAB7;
	}

	.sign-in-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 40rpx;
	}

	.sign-in-pictures {
		height: 360rpx;
		width: 100%;
		border-radius: 10rpx;
		margin-bottom: 50rpx;
	}

	.btn {
		width: 100%;
		height: 98rpx;
		background: #585CF7;
		border-radius: 45rpx;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 98rpx;
	}
</style>
